import React, { useState } from 'react';
import { Card, Table, Button, Icon, Pagination, Message, Dialog, Form,Input,Select,NumberPicker } from '@alifd/next';
import { TableProps } from '@alifd/next/lib/table';
import { useFusionTable, useFullscreen } from 'ahooks';

import CustomList, { Column } from './CustomList';
import { getColumnKey } from './util';
import actions from '@/utils/action'

const FORM_ITEMS = [{
  label:'名称',
  require:true,
  name:'name',
  Comp:Input
},
{
  
    label:'编码',
    require:true,
    name:'code',
    Comp:Input
  
},
{
  
  label:'库存数量',
  require:true,
  name:'count',
  Comp:NumberPicker
},
{
  label:'传输模式',
  require:true,
  name:'mode',
    dataSource:['单模','多模'],
  
  Comp:Select
},
{
  label:'纤芯数量',
  require:true,
  name:"number",
  Comp:NumberPicker
},
{
  label:'活动连接头类型',
  require:true,
  name:'type',
  Comp:Input
},
{
  label:'保护套颜色',
  name:'color',
  Comp:Input
},{
  label:'长度',
  name:"len",
  Comp:NumberPicker
},{
  label:'说明',
  name:'desc',
  Comp:Input
},
{
  label:'单位',
  require:true,
  name:'danwei',
  Comp:Input
},]
const TYPE = 'RUAN_TIAO_XIAN';


let dialogInstance:any = null;
import styles from './index.module.scss';

const getTableData = async ({ current, pageSize }: { current: number; pageSize: number }): Promise<any> => {
  return {
    list:actions.get(TYPE)
  }
};

// 根据 hidden 切换当前 column 是否显示
const filterColumns = (columnList: Column[]) => {
  const newColumnList = [...columnList];
  return newColumnList
    .filter((columnItem) => {
      if (columnItem.hidden) {
        return false;
      }
      return true;
    })
    .map((columnItem) => {
      if (columnItem.children) {
        const groupProps = { ...columnItem };
        delete groupProps.children;

        return (
          <Table.ColumnGroup key={getColumnKey(columnItem)} {...groupProps}>
            {filterColumns(columnItem.children)}
          </Table.ColumnGroup>
        );
      }

      return <Table.Column key={getColumnKey(columnItem)} {...columnItem} />;
    });
};

const AppList = () => {
  // 切换紧凑模式
  const [sizeStatus, changeSize] = useState<TableProps['size']>('medium');
  // 获取表格数据
  const {  tableProps,refresh } = useFusionTable(getTableData, {});

  // 切换当前 columns
  const defaultColumns:any = (FORM_ITEMS.map(i=>{
    const {label:title,name:dataIndex,type='string'}:any = i;
    return {
      title,dataIndex,type
    }
  }) as any).concat({
    title:"操作",
    dataIndex:"ANY",
    type:"string",
    cell:($0,$1,record)=>{
  
      return <Button type="primary" text={true} onClick={()=>{
        actions.del(TYPE)(record);
        refresh();
      }}>删除</Button>
    }
  })
  

  return (
    <Card free className={styles.container} id="table-container">
      <Card.Content>
        <div className={styles.actionBar}>
          <div className={styles.buttonGroup}>
            <Button type="primary" onClick={() => {
              const handleSubmit = async (data,err)=>{
                if(err) return;
                actions.add(TYPE)(data)
                refresh();
                dialogInstance.hide();
              }

              dialogInstance = Dialog.show({
                title:'添加',
                footer:false,
                style:{ width:500},
                content:<Form>
                  {
                    FORM_ITEMS.map(i=>{
                      const {Comp,require,label,...rest}:any = i;
                      return <Form.Item required={require} label={label}>
                        <Comp {...rest}/>
                      </Form.Item>
                    })
                  }
                  <Form.Submit validate onClick={handleSubmit} type="primary">提交</Form.Submit>
    
                </Form>
              })
            }}>
              新增
            </Button>
          </div>
        </div>
        <Table {...tableProps} size={sizeStatus} primaryKey="id.value">
          {filterColumns(defaultColumns)}
        </Table>
      </Card.Content>
    </Card>
  );
};

export default AppList;
